import React from 'react'
import { connect } from 'react-redux'
import { TopicWrapper, TopicItem } from '../style'
import * as actionCreators from '../store/actionCreators'

class Topic extends React.Component {
  componentDidMount () {
    const { fetchData } = this.props
    console.log('mounted')
    fetchData()
  }
  
  render() {
    const { list } = this.props
    return (
      <TopicWrapper>
        {
          list.map(item => {
            return (
              <TopicItem key={item.get('id')}>
                <img
                  className='topic-pic'
                  src={item.get('imgUrl')}
                  alt='pic'
                />
                {item.get('title')}
              </TopicItem>
            )
          })
        }
      </TopicWrapper>
    )
  }
}

const mapState = (state) => ({
  list: state.getIn(['home', 'topicList'])
})

const mapDispatch = (dispatch) => ({
  fetchData () {
    dispatch(actionCreators.fetchTopic())
  }
})

export default connect(mapState, mapDispatch)(Topic) 
